<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>02-24排名详情 - 快答答题</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa, #e6f0ff);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
        }
        
        /* 统一标题栏样式 */
        #header {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            padding: 12px 16px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .header_con {
            display: flex;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .back {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 8px 12px;
            position: absolute;
            left: 0;
        }
        
        .back:hover {
            transform: translateX(-5px);
        }
        
        .back span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/></svg>') no-repeat center;
            background-size: contain;
        }
        
        .top_tit {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .right_div {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .right_div a {
            display: block;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            color: white;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .right_div a:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }
        
        /* 主内容区域 */
        #content_div {
            max-width: 800px;
            margin: 20px auto;
            padding: 15px;
        }
        
        /* 排名卡片 */
        .ranking-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            overflow: hidden;
            position: relative;
        }
        
        .ranking-header {
            padding: 15px 20px;
            background: #f8fbff;
            border-bottom: 1px solid #f0f5ff;
            text-align: center;
        }
        
        .ranking-title {
            font-size: 20px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .ranking-subtitle {
            font-size: 14px;
            color: #7f8c8d;
        }
        
        /* 排名列表 */
        .ranking-list {
            padding: 10px 0;
        }
        
        .ranking-item {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            transition: all 0.3s ease;
            border-bottom: 1px solid #f0f5ff;
        }
        
        .ranking-item:last-child {
            border-bottom: none;
        }
        
        .ranking-item:hover {
            background-color: #f8fbff;
            transform: translateX(5px);
        }
        
        .rank-number {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
            color: white;
            position: relative;
            flex-shrink: 0;
            margin-right: 15px;
        }
        
        .rank-1 {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            box-shadow: 0 4px 10px rgba(255, 165, 0, 0.3);
        }
        
        .rank-2 {
            background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
            box-shadow: 0 4px 10px rgba(169, 169, 169, 0.3);
        }
        
        .rank-3 {
            background: linear-gradient(135deg, #CD7F32, #8B4513);
            box-shadow: 0 4px 10px rgba(139, 69, 19, 0.3);
        }
        
        .rank-other {
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            box-shadow: 0 4px 10px rgba(37, 117, 252, 0.2);
        }
        
        .user-info {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .user-name {
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 3px;
        }
        
        .user-stats {
            display: flex;
            gap: 15px;
            font-size: 13px;
            color: #7f8c8d;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        .stat-item i {
            color: #2575fc;
        }
        
        .user-score {
            font-size: 18px;
            font-weight: 700;
            color: #ff3b30;
            min-width: 100px;
            text-align: right;
        }
        
        .highlight {
            background: linear-gradient(to right, rgba(255, 235, 59, 0.15), transparent);
            border-left: 3px solid #FFC107;
        }
        
        .highlight .rank-number {
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .highlight .user-name {
            color: #ff6f00;
            font-weight: 700;
        }
        
        /* 搜索区域 */
        .search-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .search-box {
            flex: 1;
            position: relative;
        }
        
        .search-box input {
            width: 100%;
            padding: 12px 20px 12px 45px;
            border: none;
            border-radius: 30px;
            font-size: 14px;
            background: white;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .search-box input:focus {
            outline: none;
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.2);
        }
        
        .search-box i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #7f8c8d;
        }
        
        .filter-button {
            padding: 12px 20px;
            background: white;
            border: none;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .filter-button:hover, .filter-button.active {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3);
        }
        
        /* 分页控制 */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
        
        .page-button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border: none;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }
        
        .page-button:hover, .page-button.active {
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3);
        }
        
        /* 响应式设计 */
        @media (max-width: 480px) {
            .search-container {
                flex-direction: column;
            }
            
            .user-stats {
                flex-direction: column;
                gap: 3px;
            }
            
            .user-score {
                min-width: 80px;
                font-size: 16px;
            }
        }
        
        /* 说明弹窗 */
        .instructions-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        
        .modal-content {
            position: relative;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            z-index: 1001;
            padding: 25px;
        }
        
        .modal-header {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 22px;
            color: #2c3e50;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .modal-header p {
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .instruction-item {
            margin-bottom: 20px;
        }
        
        .instruction-item h4 {
            font-size: 16px;
            color: #2575fc;
            margin-bottom: 8px;
        }
        
        .instruction-item p {
            font-size: 14px;
            color: #555;
            line-height: 1.5;
        }
        
        .modal-close {
            display: block;
            width: 100%;
            padding: 12px;
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            border: none;
            border-radius: 30px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 20px;
            transition: all 0.3s ease;
        }
        
        .modal-close:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4);
        }
        
        /* 加载动画 */
        .loader {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .loader .spinner {
            width: 40px;
            height: 40px;
            margin: 0 auto 15px;
            border: 4px solid rgba(37, 117, 252, 0.2);
            border-top: 4px solid #2575fc;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 标题栏 -->
    <header id="header">
        <div class="header_con">
            <a href="index.html" class="back">
                <span></span>
            </a> 
            <div class="top_tit">02-24期排名</div>
            <div class="right_div">
                <a href="#" id="showInstructions">说明</a>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <div id="content_div">
        <!-- 搜索区域 -->
        <div class="search-container">
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" id="searchInput" placeholder="搜索昵称...">
            </div>
            <button class="filter-button" id="filterButton">
                <i class="fas fa-filter"></i>
                筛选
            </button>
        </div>
        
        <!-- 加载动画 -->
        <div class="loader" id="loader">
            <div class="spinner"></div>
            <div>加载排名数据中...</div>
        </div>
        
        <!-- 排名卡片 -->
        <div class="ranking-card" id="rankingCard">
            <div class="ranking-header">
                <div class="ranking-title">2023年02月第24期排名</div>
                <div class="ranking-subtitle">参与用户: 12,589人 | 平均得分: 6,845分</div>
            </div>
            
            <div class="ranking-list" id="rankingList">
                <!-- 排名数据将通过JS动态加载 -->
            </div>
        </div>
        
        <!-- 分页控制 -->
        <div class="pagination" id="pagination">
            <!-- 分页按钮将通过JS动态生成 -->
        </div>
    </div>
    
    <!-- 说明弹窗 -->
    <div class="instructions-modal" id="instructionsModal">
        <div class="modal-mask" id="closeModal"></div>
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">排名详情说明</h3>
                <p>了解排名计算规则与数据含义</p>
            </div>
            
            <div class="modal-body">
                <div class="instruction-item">
                    <h4>排名计算规则</h4>
                    <p>排名根据答题总分计算，总分=正确题数×基础分+连对加成+时间加成。</p>
                </div>
                
                <div class="instruction-item">
                    <h4>基础分规则</h4>
                    <p>每答对一题获得100分基础分，难度越高题目分值越高。</p>
                </div>
                
                <div class="instruction-item">
                    <h4>连对加成</h4>
                    <p>连续答对题目可获得额外分数加成，最高可达基础分的50%。</p>
                </div>
                
                <div class="instruction-item">
                    <h4>速度加成</h4>
                    <p>答题速度越快获得加成越多，1秒内答题可获得最高20%速度加成。</p>
                </div>
                
                <div class="instruction-item">
                    <h4>正确率说明</h4>
                    <p>正确率 = 答对题数 ÷ 总答题数 × 100%，反映用户答题准确度。</p>
                </div>
                
                <div class="instruction-item">
                    <h4>速度说明</h4>
                    <p>平均每题耗时，反映用户反应速度和知识熟练度。</p>
                </div>
            </div>
            
            <button class="modal-close" id="closeModalBtn">我知道了</button>
        </div>
    </div>

    <script>
        // 模拟排名数据
        const rankingData = [
            { rank: 1, name: "刘禹锡", accuracy: "99%", speed: "0.7秒/题", score: "10245" },
            { rank: 2, name: "李彤", accuracy: "98%", speed: "0.8秒/题", score: "10120" },
            { rank: 3, name: "齐天方", accuracy: "97%", speed: "0.9秒/题", score: "10085" },
            { rank: 4, name: "刘仁粉", accuracy: "96%", speed: "1.0秒/题", score: "9920" },
            { rank: 5, name: "一语", accuracy: "95%", speed: "1.1秒/题", score: "9850" },
            { rank: 6, name: "李温馨", accuracy: "94%", speed: "1.2秒/题", score: "9780" },
            { rank: 7, name: "沸腾鱼", accuracy: "93%", speed: "1.3秒/题", score: "9700" },
            { rank: 8, name: "拉姆达", accuracy: "92%", speed: "1.4秒/题", score: "9620" },
            { rank: 9, name: "李续", accuracy: "91%", speed: "1.5秒/题", score: "9550" },
            { rank: 10, name: "刘廷尧", accuracy: "90%", speed: "1.6秒/题", score: "9480" },
            { rank: 11, name: "老传统", accuracy: "89%", speed: "1.7秒/题", score: "9400" },
            { rank: 12, name: "全闰秀", accuracy: "88%", speed: "1.8秒/题", score: "9320" },
            { rank: 13, name: "碧桂园", accuracy: "87%", speed: "1.9秒/题", score: "9250" },
            { rank: 14, name: "稳妥才", accuracy: "86%", speed: "2.0秒/题", score: "9180" },
            { rank: 15, name: "博宇", accuracy: "85%", speed: "2.1秒/题", score: "9100" },
            { rank: 16, name: "添兴", accuracy: "84%", speed: "2.2秒/题", score: "9020" },
            { rank: 17, name: "冷漠", accuracy: "83%", speed: "2.3秒/题", score: "8950" },
            { rank: 18, name: "刘晓峰", accuracy: "82%", speed: "2.4秒/题", score: "8880" },
            { rank: 19, name: "采购员", accuracy: "81%", speed: "2.5秒/题", score: "8800" },
            { rank: 20, name: "抽根烟", accuracy: "80%", speed: "2.6秒/题", score: "8720" },
            { rank: 21, name: "水溶液", accuracy: "79%", speed: "2.7秒/题", score: "8650" },
            { rank: 22, name: "习惯于", accuracy: "78%", speed: "2.8秒/题", score: "8580" },
            { rank: 23, name: "怒焰分", accuracy: "77%", speed: "2.9秒/题", score: "8500" },
            { rank: 24, name: "直方图", accuracy: "76%", speed: "3.0秒/题", score: "8420" },
            { rank: 25, name: "尉迟恭", accuracy: "75%", speed: "3.1秒/题", score: "8350" },
            { rank: 26, name: "太任性", accuracy: "74%", speed: "3.2秒/题", score: "8280" },
            { rank: 27, name: "喜欢呢", accuracy: "73%", speed: "3.3秒/题", score: "8200" },
            { rank: 28, name: "犬瘟热", accuracy: "72%", speed: "3.4秒/题", score: "8120" },
            { rank: 29, name: "许愿", accuracy: "71%", speed: "3.5秒/题", score: "8050" },
            { rank: 30, name: "哟出现", accuracy: "70%", speed: "3.6秒/题", score: "7980" },
            { rank: 31, name: "消防员", accuracy: "69%", speed: "3.7秒/题", score: "7900" },
            { rank: 32, name: "学习通和", accuracy: "68%", speed: "3.8秒/题", score: "7820" },
            { rank: 33, name: "替补", accuracy: "67%", speed: "3.9秒/题", score: "7750" },
            { rank: 34, name: "送友人", accuracy: "66%", speed: "4.0秒/题", score: "7680" },
            { rank: 35, name: "送天涯", accuracy: "65%", speed: "4.1秒/题", score: "7600" },
            { rank: 36, name: "向法庭", accuracy: "64%", speed: "4.2秒/题", score: "7520" },
            { rank: 37, name: "三人行", accuracy: "63%", speed: "4.3秒/题", score: "7450" },
            { rank: 38, name: "需要", accuracy: "62%", speed: "4.4秒/题", score: "7380" },
            { rank: 39, name: "小太阳", accuracy: "61%", speed: "4.5秒/题", score: "7300" },
            { rank: 40, name: "瑟提", accuracy: "60%", speed: "4.6秒/题", score: "7220" }
        ];
        
        // 当前用户数据
        const currentUser = {
            rank: 15,
            name: "智慧小达人",
            accuracy: "85%",
            speed: "2.1秒/题",
            score: "9100"
        };
        
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const modal = document.getElementById('instructionsModal');
            const showBtn = document.getElementById('showInstructions');
            const closeBtn = document.getElementById('closeModalBtn');
            const mask = document.getElementById('closeModal');
            const searchInput = document.getElementById('searchInput');
            const filterButton = document.getElementById('filterButton');
            const rankingList = document.getElementById('rankingList');
            const pagination = document.getElementById('pagination');
            const loader = document.getElementById('loader');
            const rankingCard = document.getElementById('rankingCard');
            
            // 显示加载动画
            loader.style.display = 'block';
            rankingCard.style.display = 'none';
            
            // 模拟数据加载
            setTimeout(() => {
                // 隐藏加载动画，显示内容
                loader.style.display = 'none';
                rankingCard.style.display = 'block';
                
                // 初始化排名列表
                renderRankingList(rankingData.slice(0, 10));
                
                // 初始化分页
                initPagination();
                
                // 高亮当前用户
                highlightCurrentUser();
            }, 1500);
            
            // 显示弹窗
            showBtn.addEventListener('click', function(e) {
                e.preventDefault();
                modal.style.display = 'flex';
                document.body.style.overflow = 'hidden'; // 防止背景滚动
            });
            
            // 关闭弹窗
            function closeModal() {
                modal.style.display = 'none';
                document.body.style.overflow = 'auto'; // 恢复滚动
            }
            
            closeBtn.addEventListener('click', closeModal);
            mask.addEventListener('click', closeModal);
            
            // 分页按钮交互
            function initPagination() {
                const totalPages = 4;
                let paginationHTML = '';
                
                // 添加上一页按钮
                paginationHTML += `
                    <button class="page-button prev">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                `;
                
                // 添加页码按钮
                for (let i = 1; i <= totalPages; i++) {
                    paginationHTML += `
                        <button class="page-button ${i === 1 ? 'active' : ''}" data-page="${i}">
                            ${i}
                        </button>
                    `;
                }
                
                // 添加下一页按钮
                paginationHTML += `
                    <button class="page-button next">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                `;
                
                pagination.innerHTML = paginationHTML;
                
                // 添加分页事件监听
                const pageButtons = document.querySelectorAll('.page-button');
                pageButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        // 移除所有active类
                        pageButtons.forEach(btn => {
                            btn.classList.remove('active');
                        });
                        
                        // 如果是页码按钮，添加active类
                        if (this.dataset.page) {
                            this.classList.add('active');
                            changePage(parseInt(this.dataset.page));
                        } else if (this.classList.contains('prev')) {
                            // 上一页逻辑
                            const currentActive = document.querySelector('.page-button.active');
                            if (currentActive && currentActive.dataset.page > 1) {
                                const prevPage = parseInt(currentActive.dataset.page) - 1;
                                document.querySelector(`.page-button[data-page="${prevPage}"]`).click();
                            }
                        } else if (this.classList.contains('next')) {
                            // 下一页逻辑
                            const currentActive = document.querySelector('.page-button.active');
                            if (currentActive && currentActive.dataset.page < totalPages) {
                                const nextPage = parseInt(currentActive.dataset.page) + 1;
                                document.querySelector(`.page-button[data-page="${nextPage}"]`).click();
                            }
                        }
                    });
                });
            }
            
            // 切换页面
            function changePage(page) {
                // 显示加载动画
                loader.style.display = 'block';
                rankingCard.style.display = 'none';
                
                // 模拟数据加载
                setTimeout(() => {
                    // 隐藏加载动画，显示内容
                    loader.style.display = 'none';
                    rankingCard.style.display = 'block';
                    
                    // 计算起始索引
                    const startIndex = (page - 1) * 10;
                    const endIndex = startIndex + 10;
                    
                    // 渲染当前页的数据
                    renderRankingList(rankingData.slice(startIndex, endIndex));
                    
                    // 高亮当前用户
                    highlightCurrentUser();
                }, 800);
            }
            
            // 渲染排名列表
            function renderRankingList(data) {
                let rankingHTML = '';
                
                data.forEach(item => {
                    // 确定排名样式
                    let rankClass = 'rank-other';
                    let rankIcon = '';
                    
                    if (item.rank === 1) {
                        rankClass = 'rank-1';
                        rankIcon = '<i class="fas fa-crown"></i>';
                    } else if (item.rank === 2) {
                        rankClass = 'rank-2';
                    } else if (item.rank === 3) {
                        rankClass = 'rank-3';
                    }
                    
                    // 添加用户项
                    rankingHTML += `
                        <div class="ranking-item" data-rank="${item.rank}">
                            <div class="rank-number ${rankClass}">
                                ${rankIcon || item.rank}
                            </div>
                            <div class="user-info">
                                <div class="user-name">${item.name}</div>
                                <div class="user-stats">
                                    <div class="stat-item">
                                        <i class="fas fa-check-circle"></i>
                                        正确率: ${item.accuracy}
                                    </div>
                                    <div class="stat-item">
                                        <i class="fas fa-bolt"></i>
                                        速度: ${item.speed}
                                    </div>
                                </div>
                            </div>
                            <div class="user-score">${item.score}分</div>
                        </div>
                    `;
                });
                
                rankingList.innerHTML = rankingHTML;
            }
            
            // 高亮当前用户
            function highlightCurrentUser() {
                // 移除所有高亮
                document.querySelectorAll('.ranking-item').forEach(item => {
                    item.classList.remove('highlight');
                });
                
                // 查找当前用户并添加高亮
                const currentUserItem = document.querySelector(`.ranking-item[data-rank="${currentUser.rank}"]`);
                if (currentUserItem) {
                    currentUserItem.classList.add('highlight');
                    
                    // 滚动到高亮用户位置
                    currentUserItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
            
            // 搜索功能
            searchInput.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                const items = document.querySelectorAll('.ranking-item');
                
                items.forEach(item => {
                    const name = item.querySelector('.user-name').textContent.toLowerCase();
                    if (name.includes(searchTerm)) {
                        item.style.display = 'flex';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
            
            // 筛选按钮交互
            filterButton.addEventListener('click', function() {
                this.classList.toggle('active');
                
                if (this.classList.contains('active')) {
                    // 应用筛选（示例：只显示前10名）
                    const items = document.querySelectorAll('.ranking-item');
                    items.forEach(item => {
                        const rank = parseInt(item.dataset.rank);
                        if (rank > 10) {
                            item.style.display = 'none';
                        }
                    });
                } else {
                    // 移除筛选
                    const items = document.querySelectorAll('.ranking-item');
                    items.forEach(item => {
                        item.style.display = 'flex';
                    });
                }
            });
            
            // 模拟当前用户高亮显示
            function simulateCurrentUserHighlight() {
                const items = document.querySelectorAll('.ranking-item');
                if (items.length > 0) {
                    // 随机选择一个作为当前用户（实际项目中应使用真实用户数据）
                    const randomIndex = Math.floor(Math.random() * items.length);
                    items[randomIndex].classList.add('highlight');
                }
            }
        });
    </script>
</body>
</html>